# Dark Mode

Dark Mode works identically to [Tailwind CSS's dark mode](https://tailwindcss.com/docs/dark-mode). By default it uses `Appearance.getColorScheme()` on native and `prefers-color-scheme` on web.

:::info

Expo apps do not follow the system appearance unless `userInterfaceStyle` is set to automatic. [Please see the Expo docs for more information.](https://docs.expo.dev/guides/color-schemes/)

:::

## Manual color scheme control

To manualy control the color scheme you will need to enable the [`class` darkMode strategy](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually).

```tsx title="tailwind.config.js"
module.exports = {
  darkMode: "class",
  // ...
};
```

The color scheme can be changed either imperatively or using the hook API.

```tsx title="App.tsx"
import { colorScheme, useColorScheme } from "nativewind";

// Use imperatively
colorScheme.set("dark" | "light" | "system");

export default function App() {
  // Or as a hook
  const { setColorScheme } = useColorScheme();
  setColorScheme("dark" | "light" | "system");
}
```

## Supporting system preference and manual selection

You can follow the [Supporting system preference and manual selection](https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection) instructions to support both system preference and manual selection.

On native, instead of `localstorage` you can use a storage solution such as [React Native Async Storage](https://react-native-async-storage.github.io/async-storage/) and instead of adding classNames to the document, simply call `colorScheme.set` with the appropriate value.
